<template>
    <div class="news_container" v-if="data.length>0" >
        <div class="new_list" v-for="item in data" :key="item.id">
            <div class="check_box" v-if="optionFalg">
                <el-checkbox v-model="item.checked" @change="slectClick"></el-checkbox>
            </div>
            <div class="news_body">
                <div class="img_container">
                    <el-image v-if='item.pictureUrl && item.pictureUrl!=""&&item.pictureUrl.replace(" ","").substring(0,4) == "http"' class="img_con" :src="item.pictureUrl" fit="fill">
                        <div slot="error" class="image-slot " >
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <el-image v-if='item.pictureUrl && item.pictureUrl!=""&&item.pictureUrl.replace(" ","").substring(0,4) != "http"' class="img_con" :src="'data:image/jpeg;base64,'+item.pictureUrl" fit="fill">
                        <div slot="error" class="image-slot " >
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div class="meaasge_container">
                    <div class="messagge_top">
                        <div class="top_left"><barItem v-if="item.topleft.length>0" :data="item.topleft" :allData="item" @handleBar="handleBar"></barItem></div>
                        <div class="top_right"><barItem v-if="item.topright.length>0" :data="item.topright" :allData="item" @handleBar="handleBar"></barItem></div>
                    </div>
                    <div class="message_content" @click="handleClick(item)">
                        <span>{{item.content}}</span>
                    </div>
                    <div class="message_footer">
                        <div class="footer_left"><barItem v-if="item.bottomleft.length>0" :data="item.bottomleft" :allData="item" @handleBar="handleBar"></barItem></div>
                        <div class="footer_right"><barItem v-if="item.bottomright.length>0" :data="item.bottomright" :allData="item" @handleBar="handleBar"></barItem></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import barItem from "./bar.vue";
export default {
    name:"news-item",
    data(){
        return{
            multipleSelection:[],
        }
    },
    components:{
        barItem
    },
    props:{
        data: {
            type: Array,
            default: function() {
                return [];
            }
        },
        optionFalg:{
            type: Boolean,
            default: function() {
                return false;
            }
        }
    },
    methods:{
        slectClick(){
            this.multipleSelection=[]
            this.data.forEach(item=>{
                if(item.checked){
                    this.multipleSelection.push(item)
                }
            })
            this.$emit("handleSelectionChange",this.multipleSelection)
        },
        handleClick(data){
            this.$emit("handleConent",data)
        },
        handleBar(value,data){
            this.$emit("handleButton",value,data)

        }
    }
}
</script>

<style lang="stylus">
.news_container
    .new_list
        display: flex;
        flex-direction: row;
        align-self: center;
        justify-content: center;
        padding: 20px 20px 20px 10px;
        background-color: #f6f6f6;
        margin-bottom: 10px;
        &:hover 
            background-color: #e9f7ff;
        .check_box
            align-self: center;
        .news_body
            display: flex;
            margin-left 10px
            .img_container
                margin-right 10px
                /deep/ .el-image__inner
                    width: 158px;
                    height: 118px;
            .meaasge_container
                display: flex;
                flex-direction: column;
                .messagge_top
                    display: flex;
                    justify-content: space-between;
                .message_content 
                    padding: 10px 0
                    line-height: 1.54
                    min-height: 83px
                    cursor pointer
                    span
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        text-indent: 2em;
                .message_footer
                    display: flex;
                    justify-content: space-between;
@media only screen and (max-width :600px)
    .news_container
        .new_list
            .news_body
                flex-direction column;
            .meaasge_container
                .messagge_top
                    flex-direction: column;
                .message_footer
                    flex-direction: column;

</style>